<template>
	<view>
		<swiper class="swiper" :interval="3000" :duration="500" :vertical="true" @change="swipe">
			<swiper-item v-for="(item, index) in contents" :key="index">
				<view class="swiper-item flex" :style="{backgroundColor: randColor()}">
					<video :id="'video' + index" :src="item.video" :controls="false" :show-center-play-btn="false" :style="{height: item.height + 'rpx'}"></video>
					<view class="top" @click="playOrPause"></view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { onReachBottom } from '@dcloudio/uni-app';

	export default {
		data() {
			return {
				category: {id: 0, name: ''},
				page: 1,
				contents: [],
				videos: [],
				currentVideo: 0,
				currentPlay: false
			}
		},
		onLoad(options) {
			this.category.id = options.id
			uni.setNavigationBarTitle({
				title: options.name
			})
			this.getContents()
		},
		computed: {
			color() {				
				
			}
		},
		methods: {
			swipe(e) {
				let index = e.detail.current
				console.log(index)
				if (index == this.contents.length - 2 && index > this.currentVideo) {
					this.getContents()
				}

				this.videos[this.currentVideo].pause()
				this.currentVideo = index
				this.videos[this.currentVideo].play()
			},
			playOrPause() {
				let v = this.videos[this.currentVideo]
				if (this.currentPlay) {
					v.pause()
				} else {
					v.play()
				}
				this.currentPlay = ! this.currentPlay
			},
			randColor() {
				let r = Math.floor(Math.random() * 256);
				let g = Math.floor(Math.random() * 256);
				let b = Math.floor(Math.random() * 256);
				return `rgb(${r}, ${g}, ${b})`;
			},
			getContents() {
				this.$api.content.getContentList(this.category.id, this.page).then(res => {
					let contents = res.data
					if (contents.length == 0) {
						return
					}
					this.page++
					for(let content of contents) {
						content.height = content.video_height / content.video_width * 750 
						console.log(content.height)
					}
					this.contents = this.contents.concat(contents)

					setTimeout(() => {
						for (let i in this.contents){
							this.videos[i] = uni.createVideoContext('video' + i)
						}
						// #ifndef H5
						if (this.page == 2)
							this.videos[0].play()	
							this.currentPlay = true
						// #endif
					}, 1000)
				})
			}
		}
	}
</script>

<style lang="less">
	.swiper{
		// #ifdef H5
		// height: calc(100vh - var(--status-bar-height))
		height: calc(100vh - 40px);
		// #endif
		
		height: 100vh;
	}
	.swiper-item{
		width: 100%;
		height: 100%;
		align-items: center; 
	}
	
	video{
		width: 100%;
		margin:0;
		padding:0;
		object-fit: cover;
		height:100%;
		width:100%;
	}
	
	.top{
		position: absolute;
		top:0;
		left:0;
		z-index: 100;
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,.3);
	}
</style>
